<template>
	<s-layout navbar="custom1"  :bgStyle="{
	  color: '#fff'
	}" onShareAppMessage>
		<assNavbar color="#333" :background="{ BGcolor: '#fff', img: 'none' }" >
			<view class="message-search-box ss-flex justify-start ss-p-l-20">
				<uni-icons type="search" size="20" color="rgba(217, 217, 217, 0.56)"></uni-icons>
				<input class="ss-m-l-20 ss-m-r-20" type="text" :placeholder="placeHolder" v-model="state.keyword"
					placeholder-style="font-size:30rpx;color:#ABABAB;">
				<view class="search-button" @click="onSearch">搜索</view>	
			</view>
		</assNavbar>
	
		<s-group-buy-list-custom  v-for="(item,index) in state.list" :key="index" :data="item" @item-click="itemClick(item)"></s-group-buy-list-custom>
		
		
		<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
								    contentdown: '点击或上拉加载更多',
		}" @tap="loadmore" />
		
		<s-empty v-if="state.total <= 0 && state.loadStatus === 'noMore'" icon="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/soldout-empty.png" text="暂无数据">
		</s-empty>
	</s-layout>
</template>

<script setup>
	//首页优惠券列表组件
	import {
		onMounted,
			reactive,			
			ref
		} from 'vue';
	
	import { onLoad, onShow,onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app';
	
	import sheep from '@/sheep';
	
	import api from  '@/sheep/api/merchant';
	
	import assNavbar from '@/components/ass-navbar.vue';
	
	
	import sGroupBuyListCustom from '@/sheep/components/s-group-buy-list-custom/s-group-buy-list-custom.vue'
	
	import {
		showAuditContinue
	} from '@/sheep/hooks/useAudit.js'
	
	
	const title = ref("洗澡")
	
	const placeHolder = ref("")
	
	const state = reactive({
		keyword:"",
		//默认经纬度
		lat:"30.23555800000002",
		lng:"120.25218299999995",
		address:'',
		// 页数
		list: [],
		page: 1,
		total:0,
		loadStatus: 'more',
	})
	
	const itemClick=(item)=>{
		sheep.$router.go("/pages/merchant/info",{id:item.id})
	}
	
	const onSearch=(e)=>{
		
		state.page = 1
		state.list = []
		getList()
		
		
	}
	
	//获取商家列表
	const getList = async (page = 1)=>{
		
		state.loadStatus = 'loading'
				
		const {error,data} = await api.merchantList({
		   service_category_id:"all",
		   keyword:state.keyword,
		   page: state.page,
		   lng:state.lng,
		   lat:state.lat
		});
		
		if(error==0){
			
			state.list = state.list.concat(data.data)
			
			state.total = data.total
			
			if (state.list.length === 0) {
				state.total = 0
				state.loadStatus = 'noMore';
			}
			if (data.current_page < data.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
	
	//上拉加载
	onReachBottom(() => {
		loadmore()
	})
	
	//上拉加载
	const loadmore = () => {
		if (state.loadStatus !== 'noMore') {
			state.page++
			getList()
		}
	}
	//
	onLoad((option)=>{
		
		if(option && option.title){
			
			placeHolder.value = option.title
		}
	
		let address = uni.getStorageSync('district');
		
		state.lat = address.lat;
		
		state.lng = address.lng;
		
		getList()
		
	})

</script>

<style lang="scss" scoped>
.message-search-box {
	width: 490rpx;
	box-sizing: border-box;
	overflow: hidden;
	height: 32px;
	border-radius: 16px;
	background-color: rgb(245, 245, 245);
	margin-left:-40rpx;

	input {
		width: 380rpx;
		height: 32px;
		line-height: 36px;
		color: #333;
	}
	.search-button{
		width:160rpx;
		height:70rpx;
		background:#FAEA57;
		color:#181804;
		font-family: Source Han Sans;
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0em;
		border-radius:35rpx;
		display:flex;
		justify-content:center;
		align-items:center;
	}
}	
</style>
